<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浙江禾川</title>
    <link rel="icon" href="../img/logo.png" sizes="32/32">
    <!-- <script src="../js/vue.js"></script> -->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="../js/vue-router.js"></script>
    <!-- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -->

</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 使用router-link组件来导航，通过to指定跳转链接，默认会被渲染成一个a标签 -->
        <p>
            <router-link to="/hcfa">{{l1}}</router-link>
            <router-link to="/control">{{l2}}</router-link>
            <!-- <router-link to="/qd">{{li-3}}</router-link>
            <router-link to="/cg">{{li-4}}</router-link>
            <router-link to="/sys">{{li-5}}</router-link>
            <router-link to="/js">{{li-6}}</router-link>
            <router-link to="/contact">{{li-7}}</router-link>
            <router-link to="/search">{{li-7}}</router-link> -->
        </p>
        <!-- 路由出口 :路由匹配到的组件将渲染在这里-->
        <router-view></router-view>


    </div>
</body>

<script>
    // 1 定义路由组件
    const hcfa = {
        template: '<h1>浙江禾川首页</h1>'
    }
    const control = {
        template: '<h1>控制</h1>'
    }

    // 2 定义路由
    const routes = [{
        path: '/hcfa',
        component: hcfa
    }, {
        path: '/control',
        component: control
    }]

    // 3 创建route实例，传routes配置
    const router = new VueRouter({
        routes //等同于routes:routes
    })

    // 创建和挂载根实例  【注意要通过router配置参数注入路由 从而让整个应用都有路由功能
    // const app = new Vue({
    //     router,
    //     el: '#app',
    //     data: {
    //         msg: '浙江禾川科技股份有限公司！',
    //         l1: "hcfa",
    //         l2: "控制"
    //     }
    // }).$mount('#app')


    new Vue({
        el: '#app',
        data: {
            msg: '浙江禾川科技股份有限公司！'
        }
    })
</script>

</html>